<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link href="../img/icon.ico" rel="shortcut icon" />
    <link rel="stylesheet" href="../layui/css/layui.css" />
    <link rel="stylesheet" href="../css/element.min.css?1" />
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2315128_5bb2ydgeqs.css">
    <link rel="stylesheet" href="../css/reset.css?3123">
    <link rel="stylesheet" href="../css/setlayui.css?12">
    <link rel="stylesheet" href="../css/viewer.min.css">
    <script src="../layui/layui.all.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/vue.min.js"></script>
    <script type="text/javascript" src="../js/element.min.js"></script>
    <script src="../js/viewer.min.js"></script>
</head>

<body>
    <div id="app" class="page-container" style="display: none;" v-show="showApp">
        <div class="content_box">
            <div class="cell_box" style="width:32.82vw;height: 402px;">
                <div class="cell_title">
                    <div class="cell_name">基本信息:</div>
                    <div class="cell_but"></div>
                </div>
                <div class="cell_cont">
                    <div class="form_box">
                        <div class="form_name">关联计划</div>
                        <div class="form_cont" style="padding-right: 10px;">
                            <el-tooltip class="item" effect="dark" :disabled="!title" :content="title" placement="top">
                                <el-input class="public_input" disabled placeholder="请输入内容" v-model="title" clearable>
                                </el-input>
                            </el-tooltip>
                        </div>
                    </div>
                    <div class="form_box">
                        <div class="form_name">备注</div>
                        <div class="form_cont" style="padding-right: 10px;">
                            <el-tooltip class="item" effect="dark" :disabled="!remark" :content="remark"
                                        placement="top">
                                <el-input type="textarea" :rows="3" placeholder="请输入" v-model="remark" clearable>
                                </el-input>
                            </el-tooltip>
                        </div>
                    </div>
                </div>
            </div>
            <div class="cell_box" style="width: 30.99vw;margin-left: 1.71vw;height: 402px;">
                <div class="cell_title">
                    <div class="cell_name">附件:</div>
                    <div class="cell_but">
                        <el-upload class="upload-demo" action="##" :show-file-list="false" :http-request="httprequest"
                                   multiple>
                            <el-button class="border_but" type="primary">上传附件</el-button>
                        </el-upload>
                    </div>
                </div>
                <div class="cell_cont">
                    <div class="table_box border_table_box">
                        <el-table :data="fileList" height="100%" border style="width: 100%">

                            <el-table-column prop="filename" align="center" show-overflow-tooltip label="名称">
                            </el-table-column>

                            <el-table-column prop="userName" align="center" show-overflow-tooltip label="上传人"
                                             width="70">
                            </el-table-column>

                            <el-table-column prop="uploadTime" align="center" show-overflow-tooltip label="上传时间"
                                             width="160">
                            </el-table-column>

                            <el-table-column align="center" show-overflow-tooltip label="操作" width="140">
                                <template slot-scope="scope">
                                    <el-button @click="prevewImg(scope.row.filename, scope.row.fileurl)" type="text">
                                        查看
                                    </el-button>
                                    <el-button @click="downImg(scope.row.filename, scope.row.fileurl)" type="text">
                                        下载
                                    </el-button>
                                    <el-button @click="removeImg(fileList, scope.$index)" type="text">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
            <div class="cell_box" style="width: 100%;padding-top: 2.06vh;">
                <div class="cell_title">
                    <div class="cell_name">订单明细:</div>
                    <div class="cell_but">
                        <el-button class="border_but" @click="addOrder" type="primary">新增订单</el-button>
                    </div>
                </div>
                <div class="cell_cont">
                    <div v-for="(item, index) in allTableList" :key="index" style="margin-bottom: 20px;">
                        <div class="order_title" style="display: flex;align-items: center;">
                            <div class="form_name">订单标题</div>
                            <div class="form_cont" style="padding-right: 10px;max-width: 250px;">
                                <el-input class="public_input" placeholder="请输入内容" v-model="item.orderTitle" clearable>
                                </el-input>
                            </div>
                            <div>
                                <el-button class="border_but" @click="removeImg(allTableList, index, 1)" type="primary">
                                    删除
                                </el-button>
                            </div>
                        </div>
                        <div class="table_box border_table_box" style="margin-top: 20px;">
                            <el-table :summary-method="getSummaries" ref="clmxTableRef" show-summary
                                      :data="item.materials" max-height="360px" border style="width: 100%">

                                <el-table-column prop="materialName" align="center" min-width="100"
                                                 show-overflow-tooltip label="材料名称"></el-table-column>

                                <el-table-column prop="specificationName" align="center" show-overflow-tooltip
                                                 label="规格" min-width="70">
                                </el-table-column>

                                <el-table-column prop="unit" align="center" show-overflow-tooltip label="单位"
                                                 min-width="70">
                                </el-table-column>

                                <el-table-column prop="manufacturer" align="center" show-overflow-tooltip label="生产厂家"
                                                 min-width="120">
                                </el-table-column>

                                <el-table-column prop="estimatedArrivalTime" align="center" show-overflow-tooltip
                                                 label="预计到货时间" width="208">
                                    <template slot-scope="scope">
                                        <div class="table_input">
                                            <el-date-picker v-model="scope.row.estimatedArrivalTime" type="datetime"
                                                            :clearable="false" format="yyyy-MM-dd HH:mm"
                                                            value-format="yyyy-MM-dd HH:mm" placeholder="选择日期时间">
                                            </el-date-picker>
                                        </div>
                                    </template>
                                </el-table-column>

                                <el-table-column prop="addTimeApprNum" align="center" show-overflow-tooltip
                                                 label="进场后存放位置" min-width="122">
                                    <template slot-scope="scope">
                                        <div style="display: flex;align-items: center;"
                                             v-if="!scope.row.storageId || scope.row.storageId == 0">
                                            <el-button @click="chioceCk(item, scope.row, scope.$index)"
                                                       class="border_but" style="height: 24px;margin-right: 0;" type="primary">
                                                选择仓库
                                            </el-button>
                                        </div>
                                        <div @click="chioceCk(item, scope.row, scope.$index)"
                                             style="display: flex;align-items: center;color: #5574D7;text-decoration: underline;cursor: pointer;"
                                             v-if="scope.row.storageId.length > 0">
                                            {{scope.row.storageName}}
                                            {{scope.row.goodsShelvesNumber}}
                                        </div>
                                    </template>
                                </el-table-column>

                                <el-table-column prop="inventory" align="center" show-overflow-tooltip label="当前库存"
                                                 min-width="94">
                                </el-table-column>

                                <!--<el-table-column prop="purchasedQuantity" align="center" show-overflow-tooltip
                                                 label="合同内已采购" min-width="110">
                                </el-table-column>-->

                                <el-table-column prop="purchaseQuantity" align="center" show-overflow-tooltip
                                                 label="采购数量" min-width="160">
                                    <template slot-scope="scope">
                                        <div class="table_nums">
                                            <el-input-number @change="countchange(scope.row)"
                                                             v-model="scope.row.purchaseQuantity" type="number" :min="1"
                                                             label="描述文字"></el-input-number>
                                        </div>
                                    </template>
                                </el-table-column>



                                <el-table-column prop="price" align="center" show-overflow-tooltip label="采购单价(元)"
                                                 min-width="158">
                                    <!-- <template slot-scope="scope">
                                            <div class="table_input">
                                                <el-input @change="countchange(scope.row)" :min="0" placeholder="请输入内容" type="number" v-model="scope.row.price" clearable></el-input>
                                            </div>
                                        </template> -->
                                </el-table-column>

                                <el-table-column prop="taxRate" align="center" show-overflow-tooltip label="税率"
                                                 min-width="158">
                                    <!-- <template slot-scope="scope">
                                            <div class="table_input">
                                                <el-input @change="countchange(scope.row)" :min="0" :max="1" placeholder="请输入内容" type="number" v-model="scope.row.taxRate" clearable></el-input>
                                            </div>
                                        </template> -->
                                    <template slot-scope="scope">
                                        <span>{{scope.row.taxRate}}%</span>
                                    </template>
                                </el-table-column>

                                <el-table-column prop="netwr" align="center" show-overflow-tooltip label="不含税金额(元)"
                                                 min-width="120">
                                </el-table-column>

                                <el-table-column prop="taxes" align="center" show-overflow-tooltip label="税金(元)"
                                                 min-width="80">
                                </el-table-column>

                                <el-table-column prop="priceTax" align="center" show-overflow-tooltip label="价税合计(元)"
                                                 min-width="112">
                                </el-table-column>

                                <el-table-column align="center" show-overflow-tooltip label="操作" width="106">
                                    <template slot-scope="scope">
                                        <el-button @click="removeImg(item.materials, scope.$index, 1)" type="text">
                                            删除
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="but_box">
            <el-button @click="cancel" class="cancelClass">取消</el-button>
            <el-button @click="confirms" type="primary" style="margin-left: 120px">提交</el-button>
        </div>
        <ul id="jq22" style="opacity: 0;height: 0;overflow: hidden;">
            <li v-for="(item, index) in previewList" :key="index"><img :src="item" /></li>
        </ul>
    </div>
    <script src="../js/FileSaver.js"></script>
    <script src="../js/public.js?1234"></script>
    <script>
        var layer = layui.layer
        var vm = new Vue({
            el: '#app',
            data() {
                return {
                    showApp: false,
                    recid: '',
                    title: '',
                    remark: '',
                    fileList: [],
                    previewList: [],
                    allTableList: [],
                    recid: '',
                    title: '',
                    list: [],
                    projectId:''
                };
            },
            methods: {
                countchange(row) {
                    // quantity 采购数量
                    // price 单价
                    // taxRate 税率
                    // netwr 不含税金额
                    // taxes 税金
                    // priceTax 价税合计
                    if (row.taxRate > 20) {
                        row.taxRate = 20
                    }
                    if (row.taxRate < 0) {
                        row.taxRate = 0
                    }
                    if (row.price < 0) {
                        row.price = 0
                    }
                    if (row.purchaseQuantity < 1) {
                        row.purchaseQuantity = 1
                    }
                    row.priceTax = (row.purchaseQuantity * row.price).toFixed(2)
                    row.taxes = (row.purchaseQuantity * row.price * row.taxRate / 100).toFixed(2)
                    row.netwr = (row.priceTax - row.taxes).toFixed(2)
                },
                // 选择位置
                chioceCk(item, row, index) {
                    var that = this
                    var selectArr = []
                    var materiaobj = {}
                    parent.$('#publicValue').val('')
                    parent.layer.open({
                        type: 2,
                        title: '选择仓库货架',
                        shadeClose: true,
                        shade: 0.4,
                        skin: 'popup_layui',
                        area: ['77.91%', '98.88%'],
                        // area: ['91.91%', '72.16%'],
                        content: '/ApsPublic/publicList/ckList.html?isSingle=1&materiaobj=' + encodeURIComponent(JSON.stringify(materiaobj)) + '&projectId=' + that.projectId + '&selectArr=' + encodeURIComponent(JSON.stringify(selectArr)) + '&' + new Date().getTime(),
                        end: function () {
                            setTimeout(function () {
                                if (parent.$('#publicValue').val()) {
                                    var newList = JSON.parse(parent.$('#publicValue').val())
                                    row.storageId = newList[0].id
                                    row.storageName = newList[0].name
                                    row.goodsShelvesNumber = newList[0].x_goodsShelvesNumber
                                    row.goodsShelvesId = newList[0].x_goodsShelvesId
                                    item.materials[index] = row
                                }
                            }, 10)
                        }
                    });
                },
                addOrder() {
                    // allTableList
                    var that = this
                    var list = this.list
                    parent.$('#publicValue').val('')
                    parent.layer.open({
                        type: 2,
                        title: '选择合同',
                        shadeClose: true,
                        shade: 0.4,
                        skin: 'popup_layui',
                        area: ['91.4%', '89.81%'],
                        content: '/ApsPublic/publicList/cghtList.html?publicData=' + encodeURIComponent(JSON.stringify(list)) + '&isSingle=1&isCreatOrder=1'+ '&projectId=' + that.projectId + '&' + new Date().getTime(),
                        end: function () {
                            setTimeout(function () {
                                if (parent.$('#publicValue').val()) {
                                    var objs = JSON.parse(parent.$('#publicValue').val())
                                    if (objs.list.length > 0) {
                                        var clList = []
                                        for (var i = 0; i < objs.list.length; i++) {
                                            var priceTax = objs.list[i].price
                                            var taxes = (objs.list[i].price * objs.list[i].taxRate / 100).toFixed(2)
                                            clList.push({
                                                oper: 'add',
                                                materialId: objs.list[i].materialId,
                                                materialName: objs.list[i].materialName,
                                                specificationId: objs.list[i].specificationId,
                                                specificationName: objs.list[i].specificationName,
                                                unit: objs.list[i].unit,
                                                manufacturerId: objs.info.suppilerId,
                                                manufacturer: objs.info.suppilerName,
                                                estimatedArrivalTime: timeFormat(new Date(), 1),
                                                storageId: '',
                                                goodsShelvesNumber: '',
                                                inventory: objs.list[i].currentInventory,
                                                purchasedQuantity: objs.list[i].addTimeApprNum,
                                                purchaseQuantity: 1,
                                                price: objs.list[i].price,
                                                taxRate: objs.list[i].taxRate,
                                                priceTax: priceTax,
                                                taxes: taxes,
                                                netwr: (priceTax - taxes).toFixed(2),
                                            })
                                        }
                                        var flag = true
                                        for (var i = 0; i < that.allTableList.length; i++) {
                                            if (that.allTableList[i].buyContractId == objs.info.id) {
                                                that.allTableList[i].materials = clList
                                                flag = false
                                            }
                                        }
                                        if (flag) {
                                            that.allTableList.push({
                                                buyContractId: objs.info.id,
                                                buyContractNo: objs.info.contractNo,
                                                buyContractName: objs.info.title,
                                                orderTitle: '',
                                                supplierId: objs.info.suppilerId,
                                                supplierName: objs.info.suppilerName,
                                                materials: clList
                                            })
                                        }

                                    }

                                }
                            }, 100)
                        }
                    });

                },
                getSummaries(param) {
                    var that = this
                    var columns = param.columns
                    var data = param.data
                    var sums = [];
                    var that = this
                    setTimeout(function () {
                        // that.$refs.clmxTableRef.doLayout()
                        that.$forceUpdate()
                    }, 10)
                    for (var i = 0; i < columns.length; i++) {
                        if (i == 10) {
                            sums[10] = '总价';
                        } else {
                            sums[i] = ''
                        }
                        var netwrarr = []
                        var taxesarr = []
                        var priceTaxarr = []
                        var netwrcont = 0
                        var taxescont = 0
                        var priceTaxcont = 0
                        for (var j = 0; j < data.length; j++) {
                            netwrarr.push(data[j].netwr)
                            taxesarr.push(data[j].taxes)
                            priceTaxarr.push(data[j].priceTax)
                        }
                        for (var j = 0; j < netwrarr.length; j++) {
                            netwrcont += parseFloat(netwrarr[j])
                        }
                        for (var j = 0; j < taxesarr.length; j++) {
                            taxescont += parseFloat(taxesarr[j])
                        }
                        for (var j = 0; j < priceTaxarr.length; j++) {
                            priceTaxcont += parseFloat(priceTaxarr[j])
                        }
                        sums[11] = netwrcont;
                        sums[12] = taxescont;
                        sums[13] = priceTaxcont;
                        that.netwrcont = netwrcont
                        that.taxescont = taxescont
                        that.priceTaxcont = priceTaxcont
                    }
                    return sums;
                },
                prevewImg(filename, urls) {
                    if (getFileType(filename) == 'IMG') {
                        this.previewList = [urls];
                        setTimeout(function () {
                            var viewer = new Viewer(document.getElementById('jq22'), {
                                hide: function () {
                                    viewer.destroy();
                                }
                            });
                            viewer.show();
                        }, 10);
                        return false
                    }
                    if (getFileType(filename) == 'PDF') {
                        parent.layer.open({
                            type: 2,
                            title: 'pdf预览',
                            shadeClose: true,
                            shade: 0.8,
                            area: ['98%', '98%'],
                                content: '/ApsPublic/pdf/web/viewer.html?file=' + encodeURIComponent(urls),
                            end: function () { }
                        });
                        return false
                    }
                    publicdownFile(filename, urls)
                },
                downImg(filename, urls) {
                    publicdownFile(filename, urls)
                },
                removeImg(arr, index, types) {
                    var that = this
                    var title = '此操作将永久删除该文件, 是否继续?'
                    if (types == 1) {
                        title = '此操作将永久删除该数据, 是否继续?'
                    }
                    this.$confirm(title, '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(function () {
                        arr.splice(index, 1)
                        that.$forceUpdate()
                    }).catch(function () {
                    });
                },
                httprequest(file) {
                    var that = this
                    xLoading(true, '正在上传')
                    var formData = new FormData();
                    formData.append('files', file.file);
                    $.ajax({
                        type: 'post',
                        url: baseUrl + '/Common/UploadFile?method=UploadFile&type=OSS',
                        data: formData,
                        dataType: 'json',
                        contentType: false,
                        processData: false,
                        success: function (res) {
                            xLoading(false)
                            if (!res.success) {
                                that.$message({
                                    message: res.msg,
                                    type: 'error'
                                });
                                return false;
                            }
                            var newobj = {
                                fileid: res.data.fileId,
                                filename: res.data.fileName,
                                fileurl: res.data.ossUrl,
                                uploadTime: res.data.uploadTime,
                                userName: res.data.userName
                            }
                            that.fileList.push(newobj)
                        }
                    });
                },
                // 取消 同时生成订单
                cancel() {
                    var data = JSON.stringify({
                        recid: this.recid,
                        isDelete: true
                    });
                    parent.$('#publicValue').val(data);

                    setTimeout(function () {
                        var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                        parent.layer.close(index);
                    }, 100);
                },
                // 提交 同时生成订单 请求
                confirms() {
                    var that = this
                    if (this.allTableList.length == 0) {
                        this.$message({
                            message: '请添加订单',
                            type: 'warning',
                            duration: 1000
                        });
                        return false
                    }
                    for (var i = 0; i < this.allTableList.length; i++) {
                        if (!this.allTableList[i].orderTitle || this.allTableList[i].orderTitle.length == 0) {
                            this.$message({
                                message: '请输入订单标题',
                                type: 'warning',
                                duration: 1000
                            });
                            return false
                        }
                        for (var j = 0; j < this.allTableList[i].materials.length; j++) {
                            if (!this.allTableList[i].materials[j].storageId || this.allTableList[i].materials[j].storageId == 0) {
                                this.$message({
                                    message: '请选择仓库',
                                    type: 'warning',
                                    duration: 1000
                                });
                                return false
                            }
                        }
                    }
                    var uploadFile = []
                    for (var i = 0; i < this.fileList.length; i++) {
                        uploadFile.push(this.fileList[i].fileid + ',' + this.fileList[i].filename + ',' + this.fileList[i].userName + ',' + this.fileList[i].uploadTime)
                    }

                    xLoading(true, '正在提交')
                    $.ajax({
                        type: 'post',
                        url: baseUrl + '/Material/SavePurchaseOrderDatasFormPlan',
                        data: {
                            // buyPlanId: that.recid,
                            buyPlanName: that.title,
                            remarts: that.remark,
                            enclosure: uploadFile,
                            materialDeatils: JSON.stringify(that.allTableList)
                        },
                        dataType: 'json',
                        success: function (res) {
                            xLoading(false)
                            if (!res.success) {
                                that.$message({
                                    message: res.msg ? res.msg : '程序错误，请重试',
                                    type: 'error'
                                });
                                return false;
                            }
                            that.$message({
                                message: '已提交',
                                type: 'success'
                            });
                            var data = JSON.stringify({
                                recid: res.recid
                            });
                            parent.$('#publicValue').val(data);
                            setTimeout(function () {
                                var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                                parent.layer.close(index);
                            }, 300);
                        }
                    });
                    // title
                    // remark
                    // fileList
                    // allTableList
                }
            },
            mounted() {
                this.showApp = true;
                this.projectId = getQuerys('projectId');
                var objs = decodeURIComponent(getQuerys('publicData'))
                this.recid = JSON.parse(objs).recid
                this.title = JSON.parse(objs).title
                this.list = JSON.parse(objs).list
                // getQuerys()
            }
        });
    </script>
</body>
<style>
    .but_box {
        display: flex;
        justify-content: center;
        height: 70px;
        padding-bottom: 20px;
        align-items: flex-end;
        background: #fafbfc;
        border-top: 1px solid #ebebeb;
    }

        .but_box .el-button {
            width: 120px;
            height: 32px;
            background: #5574d7;
            border-radius: 5px;
            padding: 0;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
        }

        .but_box .el-button--primary:focus,
        .but_box .el-button--primary:hover {
            background: rgba(85, 116, 215, 0.6);
            border-color: rgba(85, 116, 215, 0.6);
            color: #fff;
        }

        .but_box .el-button--primary.is-active,
        .but_box .el-button--primary:active {
            background: rgba(85, 116, 215, 0.8);
            border-color: rgba(85, 116, 215, 0.8);
            color: #fff;
        }

        .but_box .cancelClass {
            background: transparent;
            border: 1px solid #bbbbc5;
            color: #333333;
        }

            .but_box .cancelClass:focus,
            .but_box .cancelClass:hover {
                color: rgba(85, 116, 215, 1);
                border-color: rgba(85, 116, 215, 0.1);
                background-color: #ecf5ff;
            }

            .but_box .cancelClass:active {
                color: rgba(85, 116, 215, 0.8);
                border-color: rgba(85, 116, 215, 0.8);
                outline: none;
            }

    .content_box {
        padding: 2.06vh 2.27vw 3.09vh;
        height: calc(100% - 70px);
        overflow: auto;
    }

    .cell_cont {
        padding: 3.09vh 2.27vw;
        border: 1px solid #EBEBEB;
        height: calc(100% - 52px);
    }

    .cell_box {
        float: left;
    }

    .cell_title {
        display: flex;
        align-items: center;
        padding: 10px 0;
        height: 52px;
    }

    .cell_but {
        padding-left: 10px;
    }

    .form_box {
        display: flex;
        width: 100%;
        margin-top: 20px;
    }

    .form_name {
        line-height: 32px;
        width: 104px;
        min-width: 104px;
        padding-right: 10px;
        text-align: right;
    }

    .form_cont {
        display: flex;
        align-items: center;
        line-height: 1;
        flex: 1;
        flex-wrap: wrap;
    }

    .border_table_box {
        height: 100%;
    }

    .table_input .el-date-editor.el-input,
    .table_input .el-date-editor.el-input__inner {
        width: 100%;
    }

    .table_nums .el-input-number {
        width: 100%;
        height: 24px;
        line-height: 24px;
    }

    .table_nums .el-input-number__decrease,
    .table_nums .el-input-number__increase {
        height: 22px;
        width: 24px;
        background: #fff;
    }

    .table_nums .el-input__inner {
        height: 24px;
        text-align: center;
        line-height: 24px;
        padding: 0 24px;
    }

    .el-input.is-disabled .el-input__inner {
        color: #333;
        background: #fff;
    }
</style>

</html>